<template>
  <div clas="xima">
    <header>
      <ol class="breadcrumb">
        <li><router-link to="/ProductDescription">成本管理</router-link></li>
        <li><router-link to="/InfluenzaSurveillanceReports">流感监测上报</router-link></li>
      </ol>
    </header>
    <div class="ximacontent">
      <div class="row">
        <div class="col-xs-12 col-md-8">
            <div class="influenza">
                <div class="influenza1">
                    <div class="title">
                        <h3>数据采集</h3>
                    </div>
                    <div class="content">
                        <div>门诊系统</div>
                        <div>住院系统</div>
                        <div>病案系统</div>
                        <div>检验系统</div>
                    </div>
                </div>
                <div class="influenza2">
                  <img src="../assets/jiantou1.jpg" alt="">
                </div>
                <div class="influenza3">
                     <div class="title">
                        <h3>监测管理</h3>
                    </div>
                    <div class="content">
                        <div>流感监测一览</div>
                        <div>门诊患者监测</div>
                        <div>在院患者监测</div>
                        <div>流感查询统计</div>
                    </div>
                </div>
                <div class="influenza4">
                  <img src="../assets/jiantou2.jpg" alt="">
                </div>
                <div class="influenza5">
                     <div class="title">
                        <h3>流感上报</h3>
                    </div>
                     <div class="content">
                        <div>数据质控核对</div>
                        <div>编码映射转换</div>
                        <div>手工数据上报</div>
                        <div>自动数据上报</div>
                    </div>
                </div>
           </div>
        </div>
 <div class="col-xs-6 col-md-4">
          <div class="guide">
            <div class="guideTop">
              <ul>
                <li>
                  <router-link to="/">西马简介</router-link>
                </li>
                <hr />
                <li>
                  <router-link to="/culture">我们的企业文化</router-link>
                </li>
              </ul>
            </div>
            <div class="guideTip">
              <p class="connect_h">联系我们</p>
              <hr
                style="border-top: 1px solid #ccc"
                width="100%"
                color="#ccc"
                size="1"
              />
                <img src="../assets/code.jpg" alt="" />
              <div><span>电话：861068005755,861068006083</span></div>
              <div><span>Email: xmbj2005@163.com</span></div>
              <div><span>邮箱: 492800904@qq.com</span></div>
              <div>
                <span>地址: 北京市西城区西直门外大街18号金贸大厦A座935</span>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xs-6 col-md-4">
          <div class="guide">
            <div class="guideTop">
              <ul>
                <li>
                  <router-link to="/ProductDescription">产品概述</router-link>
                </li>
                <hr class="simple" color="#6f5499" />
                <li><router-link to="/ProductSystem">产品体系</router-link></li>
                <hr class="simple" color="#6f5499" />
                <li><router-link to="/InfluenzaSurveillanceReports">流感监测上报</router-link></li>
                 <hr class="simple" color="#6f5499" />
                <li><router-link to="/PerformanceApp">绩时查APP</router-link></li>
              </ul>
            </div>
            <div class="guideTip">
              <p class="connect_h">联系我们</p>
              <hr
                style="border-top:1px solid #ccc;"
                width="100%"
                color="#ccc"
                size="1"
              />
              <div><span>电话：861068005755,861068006083</span></div>
              <div><span>Email: xmbj2005@163.com</span></div>
              <div><span>邮箱: 492800904@qq.com</span></div>
              <div>
                <span>地址: 北京市西城区西直门外大街18号金贸大厦A座935</span>
              </div>
              <p>
                <img src="../assets/code.jpg" alt="" />
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
       .influenza1,.influenza3,.influenza5{
         margin-bottom:6.25rem /* 100/16 */;
       }
       .influenza3,.influenza5{
         margin-top:6.25rem /* 100/16 */;
       }
    .influenza1 .title,.influenza3 .title,.influenza5 .title{
        background-color:#005051;
        color:#fff;
        padding:.3125rem /* 5/16 */;
        border-radius: 4%;
        margin-bottom:1.875rem /* 30/16 */;
        text-align: center;;
    }
     .influenza1  .content,.influenza3 .content,.influenza5 .content{
         background-color:#ccc;
         padding:1.25rem /* 20/16 */;
         text-align: center;
     }
     .influenza1  .content div,.influenza3 .content div,.influenza5 .content div{
         border:1px solid #005051;
         padding:1.25rem /* 20/16 */;
         margin-bottom:.625rem /* 10/16 */;
         color:#005051;
     }
     .influenza .influenza2,.influenza .influenza4{
       text-align:center;
     }
    .influenza .influenza2 img,.influenza .influenza4 img{
        transform: rotate(90deg);
     }
    .guide {
        width: 100%;
    }
    
    .guideTop {
        background-color: #005051;
        margin-bottom: 1.75rem/* 30/
        16 */
        ;
    }
    
    .guideTop ul {
        list-style-type: none;
    }
    
    .guideTop ul li {
        margin-top: 0.625rem/* 10/16 */
        ;
        height: 2.5rem/* 40/16 */
        ;
        line-height: 2.5rem/* 40/16 */
        ;
        overflow: hidden;
        /*解决高度设置无效的问题*/
    }
    
    .guideTop ul li a {
        color: #fff;
    }
    
    .guideTip .connect_h {
        font-size: 20px;
    }
    
    .guideTip div {
        white-space: nowrap;
    }
    
    .guideTip div span {
        word-break: break-all;
    }
    /* 中等屏幕（桌面显示器，大于等于 992px） */
    
    @media screen and (min-width: 992px) {
       
    .influenza{
        display:flex;
    }
    .influenza1,.influenza3,.influenza5{
        margin:0 .625rem /* 10/16 */;
    }
    .influenza1 .title,.influenza3 .title,.influenza5 .title{
        background-color:#005051;
        color:#fff;
        padding:.3125rem /* 5/16 */;
        border-radius: 4%;
        margin-bottom:1.875rem /* 30/16 */;
        text-align: center;;
    }
     .influenza1  .content,.influenza3 .content,.influenza5 .content{
         background-color:#ccc;
         padding:1.25rem /* 20/16 */;
         text-align: center;
     }
     .influenza1  .content div,.influenza3 .content div,.influenza5 .content div{
         border:1px solid #005051;
         padding:1.25rem /* 20/16 */;
         margin-bottom:.625rem /* 10/16 */;
         color:#005051;
     }
     .influenza .influenza2 img,.influenza .influenza4 img{
          transform:translateY(120%);
     }
        .guideTop {
            background-color: #005051;
            margin-bottom: 1.8 75rem;
        }
        .guideTop ul li {
            margin-top: 0.625rem/* 10/16 */
            ;
            height: 2.5rem/* 40/16 */
            ;
            line-height: 2.5rem/* 40/16 */
            ;
            overflow: hidden;
        }
        .guideTip div {
            height: 30px;
        }
        .guideTop div span {
            word-break: break-all;
            word-wrap: break-word;
        }
    }
</style>